<template>
	<el-main>
		<el-row :gutter="0" class="box">
			<el-col :span="4" v-for="(item, index) in webList" :key="index" @click="opWebSite(item)"  @contextmenu.prevent="openMenu($event,item)">
				<el-icon v-if="item.webType=='1'" style="float:right;font-size: 20px;top: 10px;right: 10px;color: #999">
					<el-icon-avatar/>
				</el-icon>
				<div class="icon-box">
					<el-image class="image" :src="item.logo" style="height: 40px;width: 40px"></el-image>
					<p>{{ item.webTitle }}</p>
				</div>
			</el-col>
			<el-col :span="4"  @click="addWebSite">
				<div class="icon-box">
					<el-icon>
						<el-icon-plus/>
					</el-icon>
					<p>创建</p>
				</div>
			</el-col>
		</el-row>
	</el-main>
	<sc-contextmenu ref="contextmenu" @command="handleCommand">
		<sc-contextmenu-item command="delete" title="删除" icon="el-icon-delete"></sc-contextmenu-item>
		<sc-contextmenu-item command="edit" title="编辑" icon="el-icon-edit"></sc-contextmenu-item>
	</sc-contextmenu>
	<save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSaveSuccess" @closed="dialog.save=false"></save-dialog>
</template>

<script>
import saveDialog from './save'
import scContextmenu from '@/components/scContextmenu'
import scContextmenuItem from '@/components/scContextmenu/item'
export default {
	components: {
		saveDialog,
		scContextmenu,
		scContextmenuItem
	},
	data() {
		return {
			webSite:{},
			dialog: {
				save: false
			},
			webList: [],
		}
	},
	mounted() {
		this.getMySysWebSiteList();
	},
	methods: {
		openMenu(e, item) {
			if(item.webType=="1")
			{
				this.webSite = item;
				this.$refs.contextmenu.openMenu(e);
			}
		},
		async handleCommand(command) {
			if (command == "edit") {
				this.dialog.save = true
				this.$nextTick(() => {
					this.$refs.saveDialog.open("edit").setData(this.webSite);
				})
			}else if (command == "delete") {
				var res = await this.$API.info.sysWebSite.delete.post({recordId:this.webSite.recordId});
				if (res.code == 200) {
					let id1 = this.webList.findIndex(item => {
						if (item.recordId == this.webSite.recordId) {
							return true
						}
					})
					this.webList.splice(id1, 1)
				} else {
					this.$alert(res.message, "提示", {type: 'error'})
				}
			}
		},
		addWebSite() {
			this.dialog.save = true
			this.$nextTick(() => {
				this.$refs.saveDialog.open()
			})
		},
		opWebSite(item)
		{
		window.open(item.webSite);
		},
		async getMySysWebSiteList() {
			var res = await this.$API.info.sysWebSite.getMySysWebSiteList.get();
			if (res.code == 200) {
				this.webList = res.data
			} else {
				this.$alert(res.message, "提示", {type: 'error'})
			}
		},
		//本地更新数据
		handleSaveSuccess() {
			this.getMySysWebSiteList();
		}
	}
}
</script>

<style scoped>
.box {
	border-top: 1px solid #eee;
	border-left: 1px solid #eee;
	cursor: pointer;
}
.box :hover{
	background-color: #CCCCCC;
}
.icon-box {
	height: 120px;
	text-align: center;
	background: #fff;
	border-bottom: 1px solid #eee;
	border-right: 1px solid #eee;
	color: #666;
	padding: 30px 10px;
}

.icon-box i {
	font-size: 26px;
	transition: color .15s linear;
}

.icon-box p {
	color: #999;
	margin-top: 15px;
	transition: color .15s linear;
}

.icon-box:hover i, .icon-box:hover p {
	color: #5cb6ff;
}

.dark .box {
	border-color: var(--el-border-color-light);
}

.dark .icon-box {
	background: var(--el-bg-color-overlay);
	border-color: var(--el-border-color-light);
}
</style>
